<template>
  <div class="user">
    <div class="info">
      <img
        class="head-portrait"
        src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/user.png?v=202106101527"
      />
      <div class="usertype">
        <p v-if="username">
          {{ username }}
        </p>
        <div v-else>
          <span @click="goLogin">登录 </span>/<span @click="goRegister">
            注册</span
          >
        </div>
      </div>
      <div class="fun" @click="goSetuser">
        <img
          src="https://cmsstatic.ffquan.cn//wap_new/user/images/icon/user_icon_set.svg?v=202106101527"
          alt=""
        />
      </div>
    </div>
    <div class="user-main">
      <div class="user-me">
        <div class="collect" @click="goshow">
          <img
            src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/love.png?v=202106101527"
            alt=""
          />
          <span>我的收藏</span>
        </div>
        <div class="collect" @click="goFootprint">
          <img
            src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/foot.png?v=202106101527"
            alt=""
          />
          <span>我的足迹</span>
        </div>
      </div>
      <div class="session">
        <img
          src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN01BTBjcQ2JJi6AJd4iX_!!2053469401.jpg"
          alt=""
        />
      </div>
      <div class="tool">
        <p class="tool-p">常用工具</p>
        <div class="tools">
          <div class="tools-box">
            <img
              src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/tools1.png?v=202106101527"
              alt=""
            />
            <span>新手教程</span>
          </div>
          <div class="tools-box">
            <img
              src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/tools2.png?v=202106101527"
              alt=""
            />
            <span>专属客服</span>
          </div>
          <div class="tools-box">
            <img
              src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/tools4.png?v=202106101527"
              alt=""
            />
            <span>意见反馈</span>
          </div>
          <div class="tools-box">
            <img
              src="https://cmsstatic.ffquan.cn//wap_new/user/images/integral/tools5.png?v=202106101527"
              alt=""
            />
            <span>帮助中心</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import { getCookie } from "@/utils";
export default defineComponent({
  setup() {
    const router = useRouter();
    const username = getCookie("username");
    return {
      goLogin() {
        router.push({
          name: "login",
        });
      },
      goRegister() {
        router.push({
          name: "register",
        });
      },
      goshow() {
        router.push({
          name: "show",
        });
      },
      goSetuser() {
        router.push({
          name: "setuser",
        });
      },
      goFootprint() {
        router.push({
          name: "footprint",
        });
      },
      username,
    };
  },
});
</script>

<style lang="stylus" scoped>
*
  padding 0
  margin 0
.user
  background url('https://cmsstatic.ffquan.cn/wap_new/user/images/user_bg.png?v=2021-06-10') no-repeat #f6f6f6
  background-size: 100% 1.95rem
  height  100%
  overflow hidden
  .info
    width: 100%
    height: .66rem
    box-sizing: border-box
    padding-left: .15rem
    position: relative
    margin-top: .16rem
    display flex
    .head-portrait
      width .65rem
      height .65rem
      display block
    .usertype
      display flex
      align-items center
      flex 1
      height: .7rem;
      line-height: .8rem;
      margin:0 .1rem;
      font-size .3rem
      color #fff
      font-weight: 500;
      div
        font-size .2rem
    .fun
      height 0.25rem
      position absolute
      top 0
      right .1rem
      display flex
  .user-main
    overflow hidden
    margin: .24rem .1rem;
    .user-me
      box-shadow: 0 0 6px -1px rgba(0,0,0,.09);
      height: .93rem;
      background: #fff;
      border-radius: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-sizing: border-box;
      .collect
        display flex
        text-align center
        flex-direction column
        color #666
        font-weight 300
        font-size .13rem
        img
          width .34rem
          height .34rem
          margin 0 auto
    .session
      height .9rem
      margin .1rem 0
      border-radius 10px
      overflow hidden
      box-shadow 0 0 6px -1px rgba(0,0,0,.09)
      img
        height .92rem
        width 100%
    .tool
      background #fff
      box-shadow 0 0 6px -1px rgba(0,0,0,.09)
      border-radius 6px
      .tool-p
        height .35rem
        border-bottom 1px solid #EEE
        line-height .35rem
        padding-left .15rem
        box-sizing border-box
        font-size .14rem
        font-weight 500
        color #333
      .tools
        padding: .13rem 0;
        display flex
        .tools-box
          flex 1
          display flex
          flex-direction column
          justify-content space-around
          color #666
          font-weight 300
          font-size .13rem
          text-align center
          height .67rem
          img
            width .3rem
            height .3rem
            margin 0 auto
</style>
